<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日历控件</title>
    <style>
        #outer{
            text-align: center;
            margin-bottom: 20px;
        }
        .calendar{
            width: 150px;
            height: 35px;
            border: 1px solid green;
            border-radius: 5px;
        }

        #search{
            border-radius: 5px;
            border: 0;
            width: 120px;
            height: 37px;
            color: #fff;
            background-color: orangered;
        }

        table{
            margin: auto;
            text-align: center;
        }

        table,td{
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        td{
            width: 60px;
        }
    </style>
</head>
<body>
  <div id="outer">
      <input type="text" class="calendar" id="year" placeholder="输入年份">
      <input type="text" class="calendar" id="month" placeholder="输入月份">
      <button type="button" id="search" onclick="search()">查询</button>
  </div>

  <div id="content">

  </div>

    <script>
        function search(){
            let content = document.getElementById("content");

            //获取文本框的数据
            let year = document.getElementById("year").value;
            let month = document.getElementById("month").value;

            //定义一个字符串
            let str = "<table>"
            str+="<tr>";
            str+="<td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>"
            str+="</tr>"


            let week = week_one(year,month);

            let count = 0;

            str+="<tr>"

            for(let i=0;i<week;i++){
                str+="<td>&nbsp</td>"
                count++;
            }
            let max = max_days(year,month);

            let now_day = new Date().getDate();

            for(let i=1;i<=max;i++){
                if(i==now_day){
                    str+="<td style='background-color: red;color: #fff'>"+i+"</td>";
                }else{
                    str+="<td>"+i+"</td>";
                }

                count++;
                if(count == 7){
                    str+="</tr>"
                    str+="<tr>";
                    count = 0;
                }
            }

            str+="</table>";


            content.innerHTML = str;
        }

        //1. 判断某年是否闰年
        function is_leapYear(year){
            return year%400==0 || (year%4==0 && year%100!=0);
        }

        //2. 给定一个年份和月份,返回最大天数
        function max_days(year,month){
            if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12)
                return 31;
            else if(month == 2)
                return is_leapYear(year)?29:28
            else
                return 30;
        }

        //3. 返回某年某月的1号是周几
        function week_one(year,month){
            let d = new Date(year,month-1,1);
            return d.getDay();//周日返回0,周一~周六返回[1,6]
        }
    </script>

</body>
</html>